<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>权限设置</title>
    <link rel="stylesheet" href="__STATIC__/js/css/layui.css">
    <link rel="stylesheet" href="__STATIC__/zTree_v3/css/zTreeStyle/zTreeStyle.css">
    <script type="text/javascript" src="__STATIC__/zTree_v3/js/jquery.min.js"></script>
    <script type="text/javascript" src="__STATIC__/zTree_v3/js/jquery.ztree.all.min.js"></script>
    <style>
        .treebox {
            padding-bottom: 60px;
        }

        .fixtoolbar {
            padding: 10px;
            position: fixed;
            left: 0;
            bottom: 0px;
            text-align: right;
            box-sizing: border-box;
            width: 100%;
            z-index: 9999;
            background: #FFF;
            border-top: solid 1px #eee;
        }
    </style>
    <script type="text/javascript">
        var setting = {
            view: {
                dblClickExpand: false
            },
            check: {
                enable: true,
                chkboxType: {"Y": "ps", "N": "s"}
            },
            data: {
                simpleData: {
                    enable: true,
                    pIdKey: 'pid'
                }
            },
            callback: {
                onClick: onClick
            }
        };

        var zNodes = {$node|raw};

        function onClick(e, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("tree");
            zTree.expandNode(treeNode);
        }

        $(document).ready(function () {
            var zTree = $.fn.zTree.init($("#tree"), setting, zNodes);
            zTree.expandAll(true);
            $("#openAll").click(function () {
                zTree.expandAll(true);
            });
            $("#closeAll").click(function () {
                zTree.expandAll(false);
            });
            $("#storage").click(function () {
                if ($(this).hasClass('layui-btn-disabled')) return false;
                var nodes = zTree.getCheckedNodes(),
                    arr = new Array();
                for (_k in nodes) {
                    arr.push("nid[]=" + nodes[_k].id);
                }
                $.ajax({
                    url: window.location.href,
                    type: 'POST',
                    dataType: 'json',
                    data: arr.join('&'),
                })
                    .done(function (_json) {
                        if (_json.code == 1) {
                            top.layer.msg(_json.msg);
                            parent.window.location.reload();
                        } else {
                            top.layer.alert(_json.msg, {icon: 5});
                        }
                    })
                    .fail(function () {
                        top.layer.msg('出问题了,请联系管理员');
                    });
                // console.log(arr.join('&'));
            })

        });
    </script>
</head>
<body>
<div class="treebox">
    <ul id="tree" class="ztree" style="padding: 15px;"></ul>
</div>
<div class="fixtoolbar">
    <button class="layui-btn" id="openAll">全部展开</button>
    <button class="layui-btn layui-btn-normal" id="closeAll">全部折叠</button>
    <button class="layui-btn layui-btn-danger " id="storage">保存权限</button>
</div>
</body>
</html>